<style rel="stylesheet/scss" lang="scss" >
.pro-gzq-home-memo{
  background: #ffffff;
  .content-box{
        position: relative;
        padding-left:160px;

        .list{
          position: absolute;
          top:0;
          left:0;
          width:160px;
          height:100%;
          background: #f5f7fe;
          padding:80px 0 60px 0;
          .list-body{
              overflow:auto;
              height:100%;
          }

          .item{
            line-height: 30px;
            font-size: 14px;
            cursor: pointer;
            color:#333333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 14px;

            &.selected{
              color:#2f6bcf;
            }
            &.hide{
                display: none;
            }
          }
          .searchbox{
              position: absolute;
              left:0;
              top:0;
              height:70px;
              width:100%;
              padding:10px;
              .title{
                text-align: center;
                line-height: 28px;
                color: #ababab;
                font-size: 14px;
              }
              .el-input input{
                  border-radius: 14px;
              }
          }
          .buttonbox{
              position: absolute;
              left:0;
              bottom:0;
              height:60px;
              width:100%;
              text-align: center;
              padding:15px;
              background: #f5f7fe;
              .button-add{
                line-height: 28px;
                background: #396ad1;
                color: #ffffff;
                display: inline-block;
                font-size: 14px;
                border-radius: 4px;
                cursor: pointer;
                width: 100%;
              }
          }
        }
        .context{
            padding:50px 10px;
            background: #F0EFFF;
            position: relative;
            height: 100%;
            overflow: auto;
            .titlebox{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                color: #333333;
                height: 50px;
                padding: 20px 180px 10px 40px;
                font-size: 14px;
                .title{
                    font-weight: bold;
                    width:100%;
                    border: 0;
                    background: transparent;
                }
                .date{
                    position: absolute;
                    right: 32px;
                    top: 20px;
                }
            }
            .buttonbox{
                position: absolute;
                bottom:0;
                right:0;
                width:100%;
                height:50px;
                padding-top:4px;
                text-align: center;
                .button{
                    width: 90px;
                    line-height: 28px;
                    background: #396ad1;
                    color: #ffffff;
                    display: inline-block;
                    font-size: 14px;
                    border-radius: 4px;
                    cursor: pointer;
                    margin: 0 10px;
                    &.disable{
                        color: #c0c4cc;
                        cursor: not-allowed;
                        background-image: none;
                        background-color: #fff;
                        border-color: #ebeef5;
                    }
                }
                .button-remove{
                    background: #ffffff;
                    color: #808080;
                    border: 1px solid #e4e4e4;
                }
                .number{
                    color: #666666;
                    position: absolute;
                    bottom: 24px;
                    right: 20px;
                    font-size: 14px;
                }
            }

            .el-textarea{
                height: 100%;
                background: url(../../assets/images/je-text.png);
                textarea{
                    height:100%;
                    line-height: 30px;
                    font-size: 14px;
                    resize: none;
                    color: #666666;
                    border: 0;
                    background: transparent;
                }
            }
        }
  }

}
</style>
<template>
  <div class="pro-gzq-home-memo">
    <div
      v-show="!visible"
      @click="setVisible(true)"
      class="empty-box"
    >
      <i class="jeicon jeicon-signing" />
      {{ $t('_tools.tijiaobeiwanglu') }}...
    </div>
    <div
      v-show="visible"
      class="content-box"
    >
      <div class="context">
        <!-- 标题 -->
        <div class="titlebox">
          <input
            v-model="info.REMINDER_TITLE"
            :readonly="readOnly"
            @input="debounced()"
            type="text"
            class="title"
            maxLength="50"
          >
          <span class="date">{{ info.SY_CREATETIME | formatDate }}</span>
        </div>
        <!-- 内容 -->
        <el-input
          ref="context"
          :readonly="readOnly"
          @input="inputChange($event)"
          v-model="info.REMINDER_CONTENT"
          type="textarea"
          max-length="3000"
        />
        <!-- 操作按钮 -->
        <div class="buttonbox">
          <div
            @click="saveMemo(true)"
            v-show="!readOnly"
            class="button button-save"
          >
            {{ $t('_tools.save') }}
          </div>
          <div
            :class="{disable:disableRemove}"
            @click="removeMemo"
            v-show="!readOnly"
            class="button button-remove"
          >
            {{ $t('_tools.del') }}
          </div>
          <span class="number">{{ (info.REMINDER_CONTENT||'').length }} / 3000</span>
        </div>
      </div>
      <div class="list">
        <div class="list-body">
          <div
            :title="item.text"
            :class="{'selected':info.JE_SYS_REMINDER_ID==item.id,'hide':filters.length>0 && filters.indexOf(item.id)==-1}"
            v-for="(item,index) in data"
            :key="item"
            @click="itemClick(index)"
            class="item"
          >
            {{ item.text }}
          </div>
        </div>
        <div class="searchbox">
          <div class="title">
            {{ $t('_tools.notes') }}({{ data.length }})
          </div>
          <el-input
            v-model="keyword"
            :placeholder="$t('_tools.search')+'...'"
            @input="inputChange($event)"
            prefix-icon="el-icon-search"
            size="mini"
            clearable
          />
        </div>
        <div class="buttonbox">
          <div
            @click="addMemo"
            class="button-add"
          >
            + {{ $t('_tools.addnotes') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  name: 'Process',
  filters: {
    formatDate(time) {
      const utildate = Ext.Date.format(Ext.Date.parse(time, 'Y-m-d H:i:s'), 'Y年m月d日 H:i');
      if (JE.getCookies('je-local-lang') != 'zh_CN') {
        return utildate.replace('年', '/').replace('月', '/').replace('日', '/');
      }
      return utildate;
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      readOnly: true,
      data: [],
      info: {},
      keyword: '',
      filters: [], // 过滤的ids
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
    };
  },
  computed: {
    disableRemove() {
      return JE.isEmpty(this.info.JE_SYS_REMINDER_ID);
    },
  },
  watch: {
    keyword(nv) {
      const ids = [];
      JE.isNotEmpty(nv) && Ext.each(this.data, (item) => {
        if (item.bean.REMINDER_TITLE.indexOf(nv) != -1) {
          ids.push(item.id);
        }
      });
      this.filters = ids;
    },
  },
  mounted() {
    this.debounced = debounce(this.saveMemo, 2000);
    this.load();
  },
  methods: {
    inputChange() {
      this.$forceUpdate();
      this.debounced();
      // const task = JE.delayedTask(()=>{
      //     console.log('大家好这里延迟执行任务咯奥')
      // })
      // task.delay(1000)
    },
    setVisible(visible) {
      this.$emit('setVisible', visible);
    },
    itemClick(index) {
      const me = this;
      if (me.data[index]) {
        me.info = me.data[index].bean;
        me.readOnly = false;
      } else {
        me.info = {};
        me.readOnly = true;
      }
    },
    /**
         * 添加笔记
         */
    addMemo() {
      this.info = {
        REMINDER_TITLE: this.lang == 'zh_CN' ? '新笔记' : 'New notes',
        SY_CREATETIME: Ext.Date.format(new Date(), 'Y-m-d H:i:s'),
      };
      this.readOnly = false;
      this.$refs.context.focus();
    },
    getIndexById(id) {
      const me = this; let index = -1;
      Ext.each(me.data, (item, i) => {
        if (item.id == id) {
          index = i;
          return false;
        }
      });
      return index;
    },
    /**
         * 删除笔记
         */
    removeMemo() {
      const me = this;
      if (me.disableRemove) { return; }
      JE.confirm(me.lang == 'zh_CN' ? '确定删除吗？' : 'Are you sure to delete it?', (btn) => {
        if (btn == 'ok') {
          const id = me.info.JE_SYS_REMINDER_ID;
          const index = me.getIndexById(id);
          JE.ajax({
            url: JE.getUrlMaps('je.core.remove'),
            params: {
              tableCode: 'JE_SYS_REMINDER',
              ids: id,
            },
          });
          me.data.splice(index, 1);
          JE.msg(me.lang == 'zh_CN' ? '删除成功！' : 'Deleted successfully!');
          me.itemClick(0);
        }
      });
    },
    /**
         * 保存笔记
         */
    saveMemo(showtip) {
      const me = this; let act = 'update';
      const params = {
        tableCode: 'JE_SYS_REMINDER',
        REMINDER_TITLE: me.info.REMINDER_TITLE,
        REMINDER_CONTENT: me.info.REMINDER_CONTENT,
        JE_SYS_REMINDER_ID: me.info.JE_SYS_REMINDER_ID,
      };
      if (JE.isEmpty(params.REMINDER_TITLE)) {
        JE.msg(this.lang == 'zh_CN' ? '请填写标题！' : 'Please fill in the title!');
        return;
      }

      if (JE.isEmpty(params.REMINDER_CONTENT)) {
        JE.msg(this.lang == 'zh_CN' ? '请填写内容！' : 'Please fill in the content!');
        return;
      }

      if (params.REMINDER_CONTENT.length > 3000) {
        JE.msg(this.lang == 'zh_CN' ? '最多输入3000字！' : 'Enter up to 3000 words!');
        return;
      }
      if (JE.isEmpty(params.JE_SYS_REMINDER_ID)) {
        act = 'save';
        Ext.apply(params, {
          SY_PARENT: 'ROOT',
          SY_PATH: '/ROOT',
          SY_PARENTPATH: '/ROOT',
          SY_TREEORDERINDEX: '000001',
          SY_NODETYPE: 'LEAF',
        });
      }
      const obj = JE.ajax({
        url: JE.getUrlMaps(`je.core.${act}`),
        params,
      });
      if (obj.success) {
        if (showtip) {
          JE.msg(this.lang == 'zh_CN' ? '保存成功！' : 'Save success!');
        }
        for (const key in obj.obj) {
          me.$set(me.info, key, obj.obj[key]);
        }
        const item = { id: me.info.JE_SYS_REMINDER_ID, text: me.info.REMINDER_TITLE, bean: me.info };
        let index = 0;
        if (act == 'save') {
          me.data.unshift(item);
        } else {
          index = me.getIndexById(me.info.JE_SYS_REMINDER_ID);
          me.$set(me.data, index, item);
        }
        me.itemClick(index);
      }
    },
    // 获取数据
    load() {
      const params = {
        moreRoot: false,
        tableCode: 'JE_SYS_REMINDER',
        excludes: 'checked',
        node: 'ROOT',
        onlyItem: false,
        orderSql: ' ORDER BY SY_CREATETIME DESC',
        whereSql: `and SY_PARENT != '' AND SY_CREATEUSERID='${JE.currentUser.userId}'`, // TODO
        j_query: Ext.encode({
          custom: [
            { type: '!=', code: 'SY_PARENT', value: '' },
            { type: '=', code: 'SY_CREATEUSERID', value: JE.currentUser.userId },
          ],
          order: [
            { type: 'desc', code: 'SY_CREATETIME' },
          ],
        }),
      };
      this.data = JE.ajax({ url: '/je/getTree', params }).children;
      this.itemClick(0);
    },
  },
};
</script>
